<template>
	<view class='issue content'>
		<view class="issue-head" style="display: flex;align-items: center;">
			<image class="issue-head-pic" :src="userInfo.headimgurl || '/static/img/head.png'"></image>
			<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>
			<tui-rate :current="score" @change="change" normal="#ccc" active="#ff7900" :size="24"></tui-rate>
		</view>
		<textarea v-if="textareaShow" 
			:value="content" 
			:placeholder="textareaPlaceholder" 
			:maxlength="250" 
			@input="inputChange"
		/>
		<text class="tisp">{{content.length}}/250</text>
		<view class="issue-btn-box">
		 	<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import tuiRate from "@/components/thor-ui/tui-rate/tui-rate"
	export default {
		components:{
			tuiRate
		},
		data() {
			return {
				headTitleShow:true ,//标题
				headTitleValue:"描述相符",
				starsDisabled:false,//是否禁用star
				textareaShow:true,// 多行文本显示
				textareaPlaceholder:"宝贝满足你的期待吗？ 说说你的使用心得",
				submitShow:true, // 发布按钮
				submitText:"发布",
				score:0,	//默认分数
				content:"" // 获取值
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(options){
			this.order_no = options.order_no;
		},
		methods: {
			inputChange(e){
				this.content = e.detail.value
			},
			// 设置分数
			change(e){
				this.score = e.index;
				this.current = e.index
			},
			/**
			 * @name 提交
			 */
			doSubmit(){
				if(this.score==0){
					return this.$util.msg("请选择评分！");
				}
				this.$util.modal("确定发布？",()=>{
					this.$request('/app/v1/Order/addIssue',{
						score:this.score,
						content:this.content,
						order_no:this.order_no
					}).then((res)=>{
						uni.redirectTo({url:"/pages/success/success"});
					}).catch(res=>{   
						
					});
				});
			}
			
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	
	.issue {
		background-color: $backgroundC;
		&-head{
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
		}
		textarea{
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}
		&-btn-box{
			position: fixed;
			bottom: 0;
			width: 100%;
			left:0;
			right: 0;
			button{
				width: 100%;
				height: 85upx;
				border-radius: 0;
				font-size: $fontSize;
				background-color:$base-color;
				line-height: 85upx
			}
		}
		.tisp{
			float: right;
			margin-top: -25px;
			position: relative;
			z-index: 2;
			margin-right: 5px;
			color: #a7a7a7;
		}
	}
</style>
